<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="tools/bootstrap-3.4.1-dist/css/bootstrap.min.css" />
	</head>
	<body>

		<div
			style="padding: 4rem 0; background-image: url(img/login_bg.png);width: 100%;height: 100vh; background-repeat:no-repeat; background-size:100% 100%;">
			<div
				style="position: fixed;left: 50%;top: 50%;transform: translate(-50%,-50%);  background: url(img/login_content.png);width: 60vw;height: 35rem; background-repeat:no-repeat; background-size:100% 100%;">


				<div style="width: 30rem;padding:3rem 5rem;">
					<div class="" style=" color: #1480F9; text-align: center;margin-bottom: 2rem;">
						<h1 style="font-weight: bold;">账号登录</h1>
					</div>


					<div class="row tabs" style="font-size: 1.5rem;margin-bottom: 2rem;">
						<div  style="text-align: center;position: relative;cursor: pointer;" class="change text col-sm-6" class="change">
							春风管理</div>
						<div style="text-align: center;cursor: pointer;" class=" text col-sm-6">桃李测评</div>
					</div>
					
					
					
					<form class="form-horizontal" role="form">
						<div style="margin-bottom: 1rem;">UID</div>
						<div class="form-group">
							<div class="col-sm-10">
								<input type="text" class="form-control" id="firstname" 
									   placeholder="请输入UID">
							</div>
						</div>
						<div style="font-size: 0.7rem;color: #333333;margin-bottom: 1rem;">密码</div>
						<div class="form-group">
							<div class="col-sm-10">
								<input type="text" class="form-control" id="lastname" 
									   placeholder="请输入密码">
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-10">
								<div class="checkbox" style="margin-left: 1rem;">
									
										<input type="checkbox"> 
									
									<span style="color: #666;">我已阅读并同意</span><span style="color:#1480F9 ;"><a href="">《用户隐私协议及条款》</a></span>
								</div>
							</div>
						</div>
						<div class="form-group" style="margin-top: 4rem;">
							<div class=" col-sm-10">
								<button  type="submit" class="btn btn-default">立即登录</button>
							</div>
						</div>
					</form>
				</div>

			</div>




		</div>
	</body>
	<script src="tools/jQueryDownload/jquery-3.1.1.min.js"></script>
	<script src="tools/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="tools/rem/index.js"></script>

	<script>
         $(function() {
         	$(".text").click(function(e) {
         	   $('.text').removeClass('change');
			   $(this).addClass('change')
         	})
         
         
         })

	</script>


	<style>
		.text {
			color: #666666;

		}

		.change {
			color: #1480F9;
			opacity: 1;
			transition: all 0.3s
		}

		.change::after {
			content: '';
			width: 2rem;
			height: 0.2rem;
			background: #1480F9;
			position: absolute;
			border-radius: 10rem;
			left: 50%;
			bottom: -0.5rem;
			transform: translate(-50%);

		}
		.form-control{
			background: #F8FAFF;
			border: 0;
			border-radius: 1rem;
		}
		.btn{
			width: 15rem;
			height: 3rem;
			background: #1480F9;
			border-radius: 3rem;
			color: #fff;
		}
	</style>
</html>
